<template>
	<view class="page">
		<!-- <view class="rowone">
				<view class="searchblock">
					<img class="searchicon" src="../../../static/icon/searchicon.png" />
					<input class="my-input" v-model="lineName" type="text" placeholder='请输入线路名' />
				</view>
			</view>
			<view class="rowtwo">
				<view class="searchblock">
					<img class="searchicon" src="../../../static/icon/carcalendaricon.png" />
					<input class="my-input" v-model="startDate" type="text" placeholder='发车起始日期' />
				</view>
				<view style="padding: 0 8px;color: #cccccc;">
					-
				</view>
				<view class="searchblock">
					<img class="searchicon" src="../../../static/icon/carcalendaricon.png" />
					<input class="my-input" v-model="endDate" type="text" placeholder='发车结束日期' />
				</view>
			</view>
			<view class="btnbox">
				<button class="searchbtn" @click="getOnlineShifts()">
					搜索
				</button>
			</view>
		</view> -->
		<scroll-view class="scrollList" scroll-y :scroll-into-view="scrollViewId" :style="{height:winHeight-headheight + 'px'}">
			<view class="page" style="padding: 8px 8px 0;">
				<view class="rowone">
					<view class="searchblock">
						<img class="searchicon" src="../../../static/icon/searchicon.png" />
						<input class="my-input" v-model="lineName" type="text" placeholder='请输入线路名' />
					</view>
				</view>
				<view class="rowtwo">
					<view class="searchblock">
						<img class="searchicon" src="../../../static/icon/carcalendaricon.png" />
						<!-- <input class="my-input" v-model="thestartDate" type="text" placeholder='发车起始日期' @click="open(1)"/> -->
						<view v-if="thestartDate==''" class="theplaceholder" hover-class="theplaceholder-hover" @click="open(1)">
							发车起始日期
						</view>
						<view v-else class="my-input" @click="open(1)" hover-class="my-input-hover">
							{{thestartDate}}
						</view>
					</view>
					<view style="padding: 0 8px;color: #cccccc;line-height: 36px;">
						-
					</view>
					<view class="searchblock">
						<img class="searchicon" src="../../../static/icon/carcalendaricon.png" />
						<!-- <input class="my-input" v-model="theendDate" type="text" placeholder='发车结束日期' @click="open(2)"/> -->
						<view @click="open(2)">
							<view v-if="theendDate==''" class="theplaceholder" hover-class="theplaceholder-hover">
								发车结束日期
							</view>
							<view v-else class="my-input" hover-class="my-input-hover">
								{{theendDate}}
							</view>
						</view>
					</view>
				</view>
				<view class="btnbox">
					<button class="resetbtn" @click="reset()">
						重置
					</button>
					<button class="searchbtn" @click="getOnlineShifts()">
						搜索
					</button>
				</view>
			</view>
			<view class="uni-list">
				<view class="subtitle-padding">
					<view class="subtitle-card">
						<view style="flex: 3;padding: 0 4px;">线路名</view>
						<view style="flex: 3;padding: 0 4px;">发车日期</view>
						<view style="flex: 1;padding: 0 4px;">座位数</view>
						<view style="width: 48px;">
						</view>
					</view>
				</view>
				<view v-if="shiftsData.length > 0">
					<view v-for="(shift, key) in shiftsData" :key="key">
						<view class="uni-list-cell-padding">
							<view class="uni-list-cell-card" hover-class="uni-list-cell-hover">
								<view style="flex: 3;padding: 0 4px;white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;">{{shift.line_name}}</view>
								<view style="flex: 3;padding: 0 4px;">{{shift.from_date}}</view>
								<view style="flex: 1;padding: 0 4px;">{{shift.stock_num}}</view>
								<view class="stopsalebtnbox" @click="stopSale(key)">
									<image class="stopsalebtn" src="../../../static/icon/stopsale.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="uni-list-cell-padding">
					<view class="uni-list-cell-card-none">
						暂无数据
					</view>
				</view>
			</view>
			<uni-pagination v-if="shiftsData.length>0" :show-icon="true" :total="total" :pageSize="pageSize" @change="getOnlineShifts" title="标题文字" />
		</scroll-view>
		<uni-popup-stop :show="showPopupMiddle" :type="popType">
			<view class="popupexplain">
				确认停售这趟班次吗？
			</view>
			<view class="popuptwobutton">
				<view class="popupbutton" @click="showPopupMiddle=false">点错了</view>
				<view class="popupbutton" @click="SubmitstopSale" type="primary">确认停售</view>
			</view>
		</uni-popup-stop>
		<view v-if="showCalendar" class="calendar-mask" @click="closeMask">

		</view>
		<view class="calendar-box" @click.stop="" :class="{'calendar-box-show':showCalendar}">
			<uni-calendar :lunar="tags[0].checked" :fixed-heihgt="tags[1].checked" :slide="slide" :disable-before="tags[6].checked"
			 :start-date="startDate" :end-date="endDate" :date="date" @change="change" @to-click="toClick" />
			<!-- <view class="calendar-button-groups">
				<button class="calendar-button-confirm" @click="closeMask">取消</button>
				<button class="calendar-button-confirm" @click="confirm">确认</button>
			</view> -->
		</view>
	</view>
</template>

<script>
	var Util = require('@/components/util.js');
	var cityData = require("@/components/home-search-city.js");
	import MyNavBar from '@/components/my-nav-bar.vue';
	import uniPopupStop from '@/components/uni-popup-stop.vue';
	import uniPagination from '@/components/uni-pagination.vue';
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'

	export default {
		data() {
			function getDate(date, AddDayCount = 0) {
				if (typeof date !== 'object') {
					date = date.replace(/-/g, '/')
				}
				let dd = new Date(date)
				dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
				let y = dd.getFullYear()
				let m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
				let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
				return y + '-' + m + '-' + d
			}
			let tags = [{
					id: 0,
					name: '农历',
					checked: false,
					attr: 'lunar'
				},
				{
					id: 1,
					name: '固定高度',
					checked: false,
					attr: 'fixedHeihgt'
				},
				{
					id: 2,
					name: '垂直滚动',
					checked: false,
					attr: 'vertical'
				},
				{
					id: 3,
					name: '水平滚动',
					checked: false,
					attr: 'horizontal'
				},
				{
					id: 4,
					name: '开始日期(' + getDate(new Date(), -1) + ')',
					checked: false,
					value: getDate(new Date(), -1),
					attr: 'startDate'
				},
				{
					id: 5,
					name: '结束日期(' + getDate(new Date(), 2) + ')',
					value: getDate(new Date(), 2),
					checked: false,
					attr: 'endDate'
				},
				{
					id: 6,
					name: '禁用今天之前的日期',
					checked: false,
					attr: 'disableBefore'
				},
				{
					id: 7,
					name: '自定义当前日期(' + getDate(new Date(), 1) + ')',
					value: getDate(new Date(), 1),
					checked: false,
					attr: 'date'
				}
			]
			return {
				showCalendar: false,
				show: false, //日历
				slide: 'none',
				date: '',
				startDate: '',
				endDate: '',
				timeData: {},
				showPopupMiddle: false,
				popType: 'middle',
				popType2: 'black',
				lists: cityData.lists, //城市数据
				touchmove: false, //
				touchmoveIndex: -1, //选中的右边小标题的index，
				itemHeight: 0, //右边单个小标题高度
				winHeight: 0, //可使用窗口高度
				scrollViewId: "", //值应为某子元素id
				titleHeight: 0,
				style: "", //控制两种样式
				headheight: 0, //自己做的导航栏高度
				lineName: '', // 线路名
				thestartDate: '', //发车起始日期
				theendDate: '', // 发车结束日期
				pageSize: 20, // 每页多少条
				shiftsData: [],
				total: 0, // 数据总量
				scheduleDateId: '', //点击的在线班次的ID
				tags,
				index: '', //判断是选择起始日期还是结束日期
			}
		},
		components: {
			MyNavBar,
			uniPopupStop,
			uniPagination,
			uniCalendar
		},
		onLoad() {
			let winHeight = uni.getSystemInfoSync().windowHeight - this.headheight; //获取可使用窗口高度,屏幕高度(screenHeight) - 导航(tabbar)高度。
			// this.itemHeight = winHeight / 24;//设置右边一个小标题(当前，热门，字母)的高度(占整个高度)
			this.winHeight = winHeight;
			this.getOnlineShifts();

		},
		mounted() {
			// this.$nextTick(function() {
			// 	this.headheight = document.getElementsByClassName('my-page-head')[0].offsetHeight;
			// })
		},

		methods: {
			// 获取綫路数据
			getOnlineShifts(page = 1) {
				let self = this;
				// if (self.startDate != '') {
				// 	self.startDate = Util.dateDayFormat(self.startDate);
				// }
				// if (self.endDate != '') {
				// 	self.endDate = Util.dateDayFormat(self.endDate);
				// }
				let postData = ({
					'page': page,
					'size': self.pageSize,
					'lineName': self.lineName,
					'startDate': self.thestartDate,
					'endDate': self.theendDate
				});
				uni.request({
					method: 'POST',
					url: this.websiteUrl + 'api/schedules/getOnlineSchedule',
					header: {
						// 'Content-Type': 'application/json', //自定义请求头信息
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					data: postData,
					success: (res) => {
						if (res.data.success) {
							self.shiftsData = res.data.obj.content;
							self.total = res.data.obj.totalElements;
							self.shiftsData.forEach((shift) => {
								shift.from_date = Util.dateDayFormat(shift.from_date)
							})
							// self.lsShift = [];
							// self.isSelect = false;
						} else {
							uni.showToast({
								title: '获取在线班次失败',
								icon: 'none'
							});
						}
					}
				});
			},
			// //切换页码
			// pageSizeChange(e) {
			// 	let self = this;
			// 	self.pageSize = e;
			// 	self.getOnlineShifts();
			// },
			// 停售班次
			stopSale(e) {
				this.scheduleDateId = this.shiftsData[e].id;
				this.showPopupMiddle = true;
			},
			// 确认停售在线班次
			SubmitstopSale() {
				let self = this;
				self.showPopupMiddle = false;
				uni.showLoading({
					title: '停售中'
				}); //
				let data = ({
					scheduleDateId: this.scheduleDateId
				});
				uni.request({
					method: 'post',
					url: this.websiteUrl + 'api/schedules/stopSaleByScheduleDateId',
					header: {
						// 'Content-Type': 'application/json', //自定义请求头信息
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					data: data,
					success: (res) => {
						if (res.data.success) {
							uni.showToast({
								title: '在线班次停售成功',
								icon: 'none'
							});
							debugger
							uni.hideLoading()
							self.getOnlineShifts();
						} else {
							uni.showToast({
								title: '在线班次停售失败',
								icon: 'none'
							});
							// self.showPopupMiddle = false;
							uni.hideLoading()
						};
					},

					//把选中的城市名传到上个页面，同时返回上个页面
					selectcity(e) {
						uni.navigateTo({
							url: 'classdetails'
						})
					}

				})
			},
			// 重置
			reset() {
				this.lineName = '';
				this.thestartDate = '';
				this.theendDate = '';
				this.getOnlineShifts()
			},
			toggle(index, item) {
				this.tags[index].checked = !item.checked
				// item.checked = !item.checked;
				console.log(index)
				if (index === 2) {
					this.tags[3].checked = false
				}
				if (index === 3) {
					this.tags[2].checked = false
				}
				// this.attribute[item.attr] = !item.checked;
			},
			open(index) {
				if (this.tags[3].checked) {
					this.slide = 'horizontal'
				} else if (this.tags[2].checked) {
					this.slide = 'vertical'
				} else {
					this.slide = 'none'
				}
				if (this.tags[4].checked) {
					this.startDate = this.tags[4].value
				} else {
					this.startDate = ''
				}
				if (this.tags[5].checked) {
					this.endDate = this.tags[5].value
				} else {
					this.endDate = ''
				}
				if (this.tags[7].checked) {
					this.date = this.tags[7].value
				} else {
					this.date = ''
				}
				// this.show = true
				// setTimeout(() => {
				this.showCalendar = true;
				// }, 10000);
				this.index = index
			},
			closeMask() {
				this.showCalendar = false
			},
			change(e) {
				console.log('change 返回:', e.fulldate)
				this.timeData = e
			},
			toClick(e) {
				console.log('点击事件', e.fulldate)
				if (this.index == 1) {
					this.thestartDate = e.fulldate;
				}
				if (this.index == 2) {
					this.theendDate = e.fulldate;
				}
				this.showCalendar = false
			},
			confirm(e) {
				this.showCalendar = false
			}
		},
	}
</script>

<style lang="less">
	.page {
		.rowone {
			padding: 16px 15px 0;
			background-color: #FFFFFF;
			border-radius: 4px 4px 0 0;

			.searchblock {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				height: 36px;
				align-items: center;
				background-color: #f4f5f6;
				border-radius: 4px;
				flex: 2;
				padding: 0 6px;

				.searchicon {
					width: 48upx;
					height: 48upx;
					margin-right: 6px;
				}

				.my-input {
					flex: 1;
					font-size: 14px;
					height: 32px;
					line-height: 32px;
					color: #333333
				}
			}
		}

		.rowtwo {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			height: 68px;
			background-color: #FFFFFF;
			padding: 16px 15px;

			.searchblock {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				height: 36px;
				align-items: center;
				background-color: #f4f5f6;
				border-radius: 4px;
				flex: 2;
				padding: 0 6px;

				.searchicon {
					width: 48upx;
					height: 48upx;
					margin-right: 6px;
				}

				.theplaceholder {
					flex: 1;
					font-size: 14px;
					height: 32px;
					line-height: 32px;
					color: #999999;

				}

				.theplaceholder-hover {
					color: #d9d9d9;
				}

				.my-input {
					flex: 1;
					font-size: 14px;
					height: 32px;
					line-height: 32px;
					color: #333333;
				}

				.my-input-hover {
					color: #b3b3b3
				}
			}
		}

		.btnbox {
			padding: 0 15px 16px;
			background-color: #FFFFFF;
			border-radius: 0 0 4px 4px;
			display: flex;
			flex-direction: row;

			.resetbtn {
				background-color: #e5f5ff;
				color: #11A0F8;
				height: 36px;
				line-height: 36px;
				font-size: 16px;
				flex: 1;
				border-radius: 4px 0 0 4px;
			}

			.searchbtn {
				background-color: #11A0F8;
				color: #FFFFFF;
				height: 36px;
				line-height: 36px;
				font-size: 16px;
				flex: 1;
				border-radius: 0 4px 4px 0;
			}
		}
	}

	// uni-button:after {
	// 	display: none;
	// 	border: 0px;
	// }
	// uni-button::after {
	// 	display: none;
	// 	border: 0px;
		
	// }

	.scrollList {
		flex: 1;
		height: 100vh;
	}

	/* 改变当前和热门的排列方式 */

	/* 有白底的 */
	/* .my-list-cells{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 20upx 48upx 20upx 20upx;
		font-size: 28upx;
		color: #333333;
		background-color: #FFFFFF;
	}
	.my-list-cell-out{
		width: 33.3333%;
		text-align: center;
		padding: 10upx;
	}
	.my-list-cell-in{{
		border-radius: 8upx;
		
		height: 80upx;
		line-height: 80upx;
		position: relative;
	}
	
	.my-list-cell-in::after {
		position: absolute;
		left: 0upx;
		top: 0upx;
		z-index: 10;
		border: 1px solid #E5E5E5;
		border-radius: 8upx;
		width: 200%;
		height: 200%;
		content: '';
		-webkit-transform: scale(.5);
		transform: scale(.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	} */

	/* 无白底的 */
	.my-list-cells {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0upx 48upx 0upx 20upx;
		font-size: 28upx;
		color: #333333;
		background-color: #f4f5f6;
	}

	.my-list-cell-out {
		width: 33.3333%;
		text-align: center;
		padding: 10upx;
	}

	.my-list-cell-in {
		border-radius: 8upx;
		background-color: #FFFFFF;
		height: 80upx;
		line-height: 80upx;
		position: relative;
	}

	/* 让右边小标题上下居中 */
	.theheight {
		position: fixed;
		z-index: 10;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
	}

	.uni-indexed-list-bar {
		width: 48upx;
		height: 100vh;
		/* background-color: #FFFFFF; */
		display: flex;
		flex-direction: column;

	}

	/* 点击右边小标题，整个标题组背景颜色改变 */
	/* .uni-indexed-list-bar.active {
		background-color: rgb(200, 200, 200);
	} */

	.uni-indexed-list-text {
		color: #999;
		font-size: 22upx;
		text-align: center;
	}

	.uni-indexed-list-bar.active .uni-indexed-list-text {
		color: #333;
	}

	.uni-indexed-list-text.active,
	.uni-indexed-list-bar.active .uni-indexed-list-text.active {
		color: #11A0F8;
	}

	.uni-indexed-list-alert {
		position: absolute;
		z-index: 20;
		width: 160upx;
		height: 160upx;
		left: 50%;
		top: 50%;
		margin-left: -80upx;
		margin-top: -80upx;
		border-radius: 80upx;
		text-align: center;
		line-height: 160upx;
		font-size: 70upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.uni-list-cell-fixed {
		display: flex;
		font-size: 28upx;
		line-height: 32upx;
		color: #999;
		background-color: red;
		padding: 16upx 30upx;
		width: 100%;
	}

	.uni-list {
		background-color: #f4f5f6;
		padding: 4px 0;
	}

	.uni-list::before {
		display: none;
	}

	.uni-list::after {
		display: none;
	}

	.uni-list-cell-padding {
		padding: 4px 8px;
	}

	.uni-list-cell-card {
		background-color: #FFFFFF;
		border-radius: 4px;
		font-size: 16px;
		display: flex;
		flex-direction: row;
		height: 48px;
		line-height: 48px;
		padding: 0 12px;
		font-size: 14px;
		color: #333333;
		align-items: center;
	}

	.uni-list-cell-card-none {
		border-radius: 4px;
		font-size: 16px;
		display: flex;
		flex-direction: row;
		height: 48px;
		line-height: 48px;
		padding: 0 12px;
		font-size: 14px;
		color: #999999;
		align-items: center;
		justify-content: center;
	}

	.stopsalebtnbox {
		height: 48px;
		width: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.stopsalebtn {
		height: 24px;
		width: 24px;
	}

	.subtitle-padding {
		padding: 12px 8px 4px;
	}

	.subtitle-card {
		height: 36px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		font-size: 12px;
		color: #999;
		padding: 0 12px;
		border-radius: 4px;
	}

	/* 居中弹窗 */
	.popuptitle {
		font-weight: bold;
		margin: 40upx;
	}

	.popupexplain {
		font-size: 28upx;
		margin: 40upx;
		line-height: 36upx;
	}

	.popupbtmbutton {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background-color: #FFFFFF;
		border-radius: 0upx;
	}

	.popuptwobutton {
		display: flex;
		flex-direction: row;
		font-size: 36upx;
		color: #11a0f8;
		width: 100%;
		height: 100upx;
		align-items: center;
		position: relative;
	}

	.popupbutton {
		flex: 1;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
	}

	.popuptwobutton::before {
		position: absolute;
		z-index: 10;
		right: 0;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #e5e5e5;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.popuptwobutton::after {
		position: absolute;
		z-index: 10;
		right: 50%;
		top: 0;
		width: 1px;
		height: 100%;
		content: '';
		-webkit-transform: scaleX(.5);
		transform: scaleX(.5);
		background-color: #e5e5e5;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.calendar-mask {
		position: fixed;
		/* #ifdef H5 */
		top: 45px;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		bottom: 0;
		display: flex;
		align-items: center;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 100;
	}

	.calendar-box {
		/* margin: 20upx; */
		/* border-radius: 10upx; */
		width: 100%;
		overflow: hidden;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.calendar-box-show {
		transform: translateY(0);
	}

	.calendar-button-groups {
		position: absolute;
		width: 100%;
		bottom: 0;
		display: flex;
	}

	.calendar-button-confirm {
		width: 50%;
		margin: 10upx;
		border: 1px #eee solid;
		font-size: 32upx;
	}

	.calendar-button-confirm:after {
		border: none;
	}
</style>
